<?xml version="1.0" encoding="utf-8" ?>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%
    request.setCharacterEncoding("utf-8");
    String origin = request.getParameter("origin");
    String destination = request.getParameter("destination");
    request.setAttribute("origin", origin);
    request.setAttribute("destination", destination);
    
    %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>User Query Tickets</title>
<link rel="stylesheet" type="text/css" href="js/util/easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="js/util/easyui/themes/icon.css"/>

<script type="text/javascript" src="js/util/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/util/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/util/easyui/themes/color.css">

</head>
<body>
    <h2>可用车票信息</h2>
    
    <table id="dg" title="All Available Tickets" class="easyui-datagrid" style="width:700px;height:250px"
            url="TicketQueryServlet?origin=${origin }&destination=${destination}"
            toolbar="#toolbar" pagination="true"
            rownumbers="true" fitColumns="true" singleSelect="true">
        <thead>
            <tr>
                <th field='tickedid' width="100">车票编号</th>
                <th field='ticketnum' width="100">余票</th>             
                <th field='origin' width="100">初始站</th>
                <th field='destination' width="100">终点站</th>
                <th field='price' width="100" align="right">价格</th>
                <th field='trainno' width="100">列车编号</th>
            </tr>
        </thead>
    </table>
    
    <div id="dlg" class="easyui-dialog" style="width:400px"
            closed="true" buttons="#dlg-buttons">
        <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
            <div style="margin-bottom:20px;font-size:14px;border-bottom:1px solid #ccc">Tickets Information</div>
            <div style="margin-bottom:10px">
                <input name="ticketid" class="easyui-textbox" required="true" label="ticketid:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input name="ticketnum" class="easyui-textbox" required="true" label="ticketnum:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input name="trainno" class="easyui-textbox" required="true" label="trainno:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input name="origin" class="easyui-textbox" required="true" validType="email" label="origin:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input name="destination" class="easyui-textbox" required="true" label="destination:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input name="price" class="easyui-textbox" required="true" label="price:" style="width:100%">
            </div>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
    </div>
    <script type="text/javascript">
        var url;
        function newUser(){
            $('#dlg').dialog('open').dialog('center').dialog('setTitle','New User');
            $('#fm').form('clear');
            url = 'save_user.php';
        }
        function editUser(){
            var row = $('#dg').datagrid('getSelected');
            if (row){
                $('#dlg').dialog('open').dialog('center').dialog('setTitle','Edit Tickets');
                $('#fm').form('load',row);
                url = 'update_user.php?id='+row.id;
            }
        }
        function saveUser(){
            $('#fm').form('submit',{
                url: url,
                onSubmit: function(){
                    return $(this).form('validate');
                },
                success: function(result){
                    var result = eval('('+result+')');
                    if (result.errorMsg){
                        $.messager.show({
                            title: 'Error',
                            msg: result.errorMsg
                        });
                    } else {
                        $('#dlg').dialog('close');        // close the dialog
                        $('#dg').datagrid('reload');    // reload the user data
                    }
                }
            });
        }
        function destroyUser(){
            var row = $('#dg').datagrid('getSelected');
            if (row){
                $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
                    if (r){
                        $.post('destroy_user.php',{id:row.id},function(result){
                            if (result.success){
                                $('#dg').datagrid('reload');    // reload the user data
                            } else {
                                $.messager.show({    // show error message
                                    title: 'Error',
                                    msg: result.errorMsg
                                });
                            }
                        },'json');
                    }
                });
            }
        }
        
        function createXMLHTTPRequest() {

        	// 1.创建XMLHttpRequest对象
        	// 这是XMLHttpReuquest对象无部使用中最复杂的一步
        	// 需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
        	var xmlHttpRequest;
        	if (window.XMLHttpRequest) {
        		// 针对FireFox，Mozillar，Opera，Safari，IE7，IE8
        		xmlHttpRequest = new XMLHttpRequest();
        		// 针对某些特定版本的mozillar浏览器的BUG进行修正
        		if (xmlHttpRequest.overrideMimeType) {
        			xmlHttpRequest.overrideMimeType("text/xml");
        		}
        	} else if (window.ActiveXObject) {
        		// 针对IE6，IE5.5，IE5
        		// 两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中
        		// 排在前面的版本较新
        		var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
        		for (var i = 0; i < activexName.length; i++) {
        			try {
        				// 取出一个控件名进行创建，如果创建成功就终止循环
        				// 如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
        				xmlHttpRequest = new ActiveXObject(activexName[i]);
        				if (xmlHttpRequest) {
        					break;
        				}
        			} catch (e) {
        			}
        		}
        	}
        	
        	return xmlHttpRequest;
        }

        function get() {
        	var req = createXMLHTTPRequest();
        	if (req) {
        		req.open("GET", "TicketQueryServlet", true);
        		req.onreadystatechange = function() {
        			if (req.readyState == 4) {
        				if (req.status == 200) {
        					var ticket = JSON.parse(req.responseText);
        					//var msg = "person name=" + person.name + ";age=" + person.age + ";address=" + person.address;
        					document.getElementById("dg").innerHTML= ticket;
        				} else {
        					alert("error");
        				}
        			}
        		}
        		req.send(null);
        	}
        }

        function post() {
        	var req = createXMLHTTPRequest();
        	if (req) {
        		req.open("POST", "TicketQueryServlet", true);
        		req.setRequestHeader("Content-Type",
        				"application/x-www-form-urlencoded; charset=gbk;");
        		req.send("keywords=手机");
        		req.onreadystatechange = function() {
        			if (req.readyState == 4) {
        				if (req.status == 200) {
        					alert("success");
        				} else {
        					alert("error");
        				}
        			}
        		}
        	}
        }
    </script>
</body>
</html>